{% extends "templates/base.html" %}
{% block title %}Frappe: Frameworks + Apps{% endblock %}
{% block content %}
<style>
	.gantt .bar-progress {
    	fill: var(--primary);
	}
</style>

{{ web_blocks([
		{
			'template': "Hero",
			'values': {
				'title': "Open Source Javascript Gantt",
				'subtitle': "A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales",
				'primary_action_label': "GitHub",
				'primary_action': "https://github.com/frappe/gantt"
			}
		}
	])
}}

<section class="section section-padding-bottom">
  	<div class='container'>
		<div class="card" style="overflow: scroll" style="overflow: scroll">
			<svg id="gantt-1"></svg>
		</div>
		<p class="mt-2"><strong>Try it!</strong> Drag tasks across the timeline, resize to change duration, click to view more information</p>
	</div>
</section>

<section class="section section-padding-top section-padding-bottom bg-light">
	<div class='container'>
		<!-- Installation -->
		<div class='mb-5'>
			<h3>Installation</h3>
			<pre><code class="hljs">yarn add frappe-gantt</code></pre>
		</div>


		<!-- Usage -->
		<h3>Usage</h3>
		<p class="mb-3 text-muted">
		  Dependencies: <a target="_blank" href="http://momentjs.com">momentjs</a> and
		  	<a target="_blank" href="http://snapsvg.io">snapsvg</a>
		</p>

		<!-- Step 1 -->
		<p>Include it in your html</p>
		<pre><code class="hljs html">&lt;script src="frappe-gantt.min.js" /&gt;</code></pre>

		<!-- Step 2 -->
		<p>Create an svg element</p>
		<pre><code class="hljs html">&lt;svg id="gantt"&gt;&lt;/svg&gt;</code></pre>

		<!-- Step 3 -->
		<p>Initiliaze a new Gantt object</p>
		<pre><code class="hljs javascript">var tasks = [
  {
	id: 'Task 1',
	name: 'Redesign website',
	start: '2016-12-28',
	end: '2016-12-31',
	progress: 20,
	dependencies: 'Task 2, Task 3'
  },
  ...
]
var gantt = new Gantt("#gantt", tasks);
		</code></pre>
	</div>
</section>

<section class="section section-padding-top section-padding-bottom">
	<div class='container'>
	<h3>Change view mode</h3>
	<!-- Change view mode -->
	<pre>
		<code class="hljs javascript">gantt.change_view_mode('Week') // Quarter Day, Half Day, Day, Week, Month </code></pre>
	<div class="card" style="overflow: scroll">
	  <svg id="gantt-2"></svg>
	</div>
	<div class="mx-auto mt-3 btn-group" role="group">
	  <button type="button" class="btn btn-sm btn-light">Quarter Day</button>
	  <button type="button" class="btn btn-sm btn-light">Half Day</button>
	  <button type="button" class="btn btn-sm btn-light">Day</button>
	  <button type="button" class="btn btn-sm btn-light active">Week</button>
	  <button type="button" class="btn btn-sm btn-light">Month</button>
	</div>
	</div>
</section>

<section class="section section-padding-top section-padding-bottom bg-light">
	<div class='container'>
	<!-- Add event listeners -->
	<h3>Add event listeners</h3>
	<pre>
	  <code class="hljs javascript">var gantt = new Gantt('#gantt', tasks, {
	on_click: function (task) {
		console.log(task);
	},
	on_date_change: function(task, start, end) {
		console.log(task, start, end);
	},
	on_progress_change: function(task, progress) {
		console.log(task, progress);
	},
	on_view_change: function(mode) {
		console.log(mode);
	}
});</code></pre>
	<div class="card" style="overflow: scroll">
	  <svg id="gantt-3"></svg>
	</div>
	</div>
</section>

<section class="section section-padding-top section-padding-bottom">
	<div class='container'>
	<!-- Custom HTML in popup -->
	<h3>Custom HTML in popup</h3>
	<pre>
	  <code class="hljs javascript">var gantt = new Gantt('#gantt', tasks, {
	// can be a function that returns html
	// or a simple html string
	custom_popup_html: function(task) {
	  // the task object will contain the updated
	  // dates and progress value
	  const end_date = task._end.format('MMM D');
	  return `
		&lt;div class="details-container">
		  &lt;h5>${task.name}&lt;/h5>
		  &lt;p>Expected to finish by ${end_date}&lt;/p>
		  &lt;p>${task.progress}% completed!&lt;/p>
		&lt;/div>
	  `;
	}
});</code></pre>
	<div class="card" style="overflow: scroll">
	  <svg id="gantt-4"></svg>
	</div>
	</div>
</section>

<!-- https://unpkg.com/frappe-gantt@0.3.0/src/index.js -->

{{ web_blocks([
		{
			'template': "Section With CTA",
			'values': {
				'title': "Open Source Javascript Gantt",
				'subtitle': "A simple, interactive, modern gantt chart library for the web with drag, resize, dependencies and time scales",
				'cta_label': "Star on GitHub",
				'cta_url': "https://github.com/frappe/gantt",
				'cta_description': "MIT License",
				'show_confetti': 1
			}
		}
	])
}}

<script src="/gantt/js/moment.min.js"></script>
<script src="/gantt/js/snap.svg-min.js"></script>
<script src="/gantt/js/frappe-gantt.min.js"></script>
<script src="/gantt/js/index.js"></script>
{% endblock %}
